<template>
    <div>
        户型名称<input type="text" v-model="info.Name">
        户型结构<select v-model="info.Bind">
            <option value="">请选择</option>
            <option v-for="item in list1">{{ item.Bind }}</option>
        </select>
        <input type="button" value="查询" class="btn btn-primary" @click="getlist">
        <input type="button" value="新增" class="btn btn-info" @click="Add">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>户型名称</td>
                    <td>户型结构</td>
                    <td>装修标准</td>
                    <td>建筑面积</td>
                    <td>套内面积</td>
                    <td>户型图</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in list" key="item.Id">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Bind }}</td>
                    <td>{{ item.BiaoZhun }}</td>
                    <td>{{ item.Area }}</td>
                    <td>{{ item.InterArea }}</td>
                    <td><a :href="item.Photo" >查看</a></td>
                    <td> <input type="button" value="删除" class="btn btn-danger" @click="Del(item.Id)">
                        <input type="button" value="修改" class="btn btn-info" @click="Update(item.Id)"></td>
                </tr>
            </tbody>
        </table>
        
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios'
import {useRouter,useRoute} from 'vue-router'
const route=useRoute();
const router=useRouter();

let list:any=ref([])

let list1:any=ref([])

onMounted(()=>{
    getList1();
    getlist();
})
const getList1=()=>{
    axios({
        url:'http://localhost:5051/api/Rooms/GetBindList',
        method:'get',
        params:list1
    })
    .then(res=>{
        list1.value=res.data;
    })
    .catch(err=>{
        console.log(err);
        
    })
}
let info:any=reactive({
    Name:'',
    Bind:''
})
const Add=()=>{
    router.push('/Add')
}
const Update=(id:any)=>{
    router.push({
        path:'/Update',
        query:{
            id:id
        }
    }
   
    )
}

const getlist=()=>{
    axios({
        url:'http://localhost:5051/api/Rooms/GetRoomList',
        method:'get',
        params:info
    })
    .then(res=>{
       console.log(res);
       list.value=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
const Del=(id:any)=>{
    let f=confirm('确认删除吗');
    if(f){
        axios({
        url:'http://localhost:5051/api/Rooms/DelRoom',
        method:'delete',
        params:{
            id:id
        }
    })
    .then(res=>{
       if(res.data>0)
       {
        alert('删除成功');
        getlist();
       }
       else{
        alert('删除失败');
        return;
       }
    })
    .catch(err=>{
        console.log(err);
    })
    }
   
}
</script>

<style scoped>

</style>